<div>
	<yu-panel title="资源监控">
		<yu-row width="100%">
			<yu-col :span="24" class="grid-content bg-purple">
				<template>
					<div class="titleLabel">
						<span>数据更新时间:</span>
						<div style="font-size:14px;color: #666;display:inline;">{{currentDateTime}}</div>
						<div style="padding-left:60px;padding-top: 5px;display:inline;">
							</yu-select>
							<span>刷新间隔:&nbsp;&nbsp;&nbsp;&nbsp;</span>
							<yu-select style="width: 140px;display: inline-block;" v-model="intervalSelection" placeholder="请选择">
								<yu-option v-for="item in refreshIntervalOptions" :key="item.key" :label="item.label" :value="item.key">
								</yu-option>
							</yu-select>
						</div>
						<div style="padding-left:20px;padding-top: 5px; display: inline-block">
							<yu-button @click="refreshData" style="color:#33649c;padding-bottom: 5px">刷新</yu-button>
						</div>
					</div>
				</template>
			</yu-col>
		</yu-row>
		<yu-row width="100%" style="margin-left: 40px;">
			<el-col :span="4" v-for=" data in resourceNodeList" style="border:0px;">
				<el-popover class="item" placement="bottom-end" trigger="hover" effect="dark" @click="checkOnclick">
					<div :style="data.colorId">
						<ul>
							<li>
								<span>当前状态:&nbsp;&nbsp;&nbsp;&nbsp;{{data.nodeName}}</span>
							</li>
							<li>
								<span>异常情况:&nbsp;&nbsp;&nbsp;&nbsp;{{data.msgTip}}</span>
							</li>
						</ul>
					</div>
					<div slot="reference">
						<img :src="data.imgAddress" @click="checkOnclick(data)" style="float: inherit" class="image">
					</div>
				</el-popover>
				<div class="bottom clearfix">
					<span :style="data.colorId">{{data.addressIp}}</span>
				</div>
			</el-col>
		</yu-row>
	</yu-panel>
</div>
<style>
	.bg-purple {
		background: #DCDFE6;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.titleLabel {
		font-size: 16px;
		font-weight: bold;
		padding-left: 10px;
		verticalAlign: middle;
	}

	.bottom {
		margin-top: 0px;
		line-height: 10px;
		margin-left: 5px;

	}

	.image {
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.item {
		margin: 4px;
	}
</style>